<template>
  <div class="questionWarn">
    <ModalTitle title="三治问题监控预警" />
    <div id="question" ref="question"></div>
  </div>
</template>

<script>
import ModalTitle from "@components/ModalTitle/Index.vue";
import { FengXianJianKong } from "@/api/zhangzi/index";
let mycharts = null;
export default {
  data() {
    return {};
  },
  components: { ModalTitle },
  mounted() {
    this.getDate();
  },
  methods: {
    async getDate() {
      const { data, success, message } =
        await FengXianJianKong.questionWarnAPI();
      if (success) {
        if (data.length > 0) {
          console.log(data);
          let xData = data[0].list.map((e) => e.date);
          let yData = [];
          data.forEach((item) => {
            let obj = {
              name: item.name,
              data: item.list.map((k) => k.num),
              type: "line",
            };
            yData.push(obj);
          });
          console.log(yData,'123');
          this.$nextTick(() => {
            this.drawCharts(xData, yData);
          });
        }
      } else {
        this.$message.error(message);
      }
    },
    drawCharts(xData, series) {
      mycharts = echarts.init(this.$refs.question);
      let option = {
        grid: {
          top: "20%",
          left: "10%",
          right: "10%",
          bottom: "10%",
        },
        legend: {
          show: true,
          type: "plain",
          orient: "horizontal",
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series,
      };
      mycharts && mycharts.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.questionWarn {
  width: 100%;
  height: 100%;
  #question {
    width: 100%;
    height: calc(100% - 4.3rem);
    margin-top: 0.5rem;
  }
}
</style>